<template>
  <div>
    <el-form
      :inline="true"
      :model="searchObj"
      class="form-inline searchForm"
      size="mini"
      :key="randomNumber"
      @submit.native.prevent
    >
      <template v-for="(item,index) in formdata.fields">
        <template v-if="item.formField == 'RadioField' || item.formField == 'SelectField'">
          <el-form-item :key="index">
            <el-select v-model="item.value">
              <el-option v-for="(ite,inx) in item.options" :key="inx" :value="ite.value">
                {{ite.option}}
              </el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-else-if="item.formField == 'InputField'">
          <el-form-item :key="index">
            <el-input :placeholder="item.discript" v-model="item.value"></el-input>
          </el-form-item>
        </template>
        <template v-else-if="item.formField == 'DateField'">
          <el-form-item :key="index">
            <el-date-picker :placeholder="item.discript" v-model="item.value"></el-date-picker>
          </el-form-item>
        </template>
      </template>
      <span class="queryBtn" @click="search">查询</span>
    </el-form>
  </div>
</template>

<script>
import {
  getSearchFormTemplate
} from "@/api.js"
export default {
  props: ['viewId'],
  data() {
    return {
      searchObj:{},
      formdata:{},
      aa:'',
      randomNumber: new Date().getTime()
    }
  },
  created() {
    this.initSearchForm()
  },
  methods: {
    change(val) {
      console.log(val,'111')
      // this.$forceUpdate();
    },
    buildSearchData() {
      let data = {};
      for (let i = 0; i < this.formdata.fields.length; i++) {
        let fld = this.formdata.fields[i]
        if(fld.formField == "InputField") {
          fld.value = fld.value.trim() //文本框前后去除空格
        }
        if(fld.value) {
          data[fld.name] = fld.value
        }
      }
      return data
    },
    search() {
      let data = this.buildSearchData();
      data.viewId = this.viewId;
      this.$emit('onSearch',data)
    },
    initSearchForm() {
      let obj = {}
      getSearchFormTemplate(this.viewId, obj, {
        onSucess: response => {
          if (response.data.data) {
            let formdata = response.data.data;
            this.formdata = formdata;
          }
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  .queryBtn {
    margin-top: 11px;
    margin-bottom: 10px;
    display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
    display: inline-block;
    width: 75px;
    text-align: center;
    line-height: 28px;
    height: 28px;
    background-color: #fff;
    color: #aaa;
    border: 1px solid #dcdfe6;
    cursor: pointer;
    font-size: 14px;
    border-radius: 3px;
  }
</style>
